import { knnoButton, Dialog, Progress, Button, Toast, Waiting } from '../imports';
import { ActionPage } from './actions';

export function DialogPage() {
	return (
		<div style="display:flex;gap:0.3em;flex-wrap:wrap">
			<button
				class={knnoButton}
				onClick={function () {
					Dialog.alert('Hello world!', 'Alert');
				}}
			>
				Alert
			</button>
			<button
				class={knnoButton}
				onClick={function () {
					Dialog.warning('Warning message!', 'Warning');
				}}
			>
				Warning
			</button>
			<button
				class={knnoButton}
				onClick={function () {
					Dialog.error('Error message!', 'Error');
				}}
			>
				Error
			</button>
			<button
				class={knnoButton}
				onClick={function () {
					Dialog.success('Success message!', 'Success');
				}}
			>
				Success
			</button>
			<button
				class={knnoButton}
				onClick={function () {
					Dialog.tips('Tips message!', 'Tips');
				}}
			>
				Tips
			</button>
			<button
				class={knnoButton}
				onClick={function () {
					Dialog.confirm('Confirm message!', 'Confirm').then((result) => {
						Dialog.alert(result ? 'Confirmed' : 'Cancelled', 'Confirm');
					});
				}}
			>
				Confirm
			</button>
			<button
				class={knnoButton}
				onClick={function () {
					Dialog.prompt({
						message: 'Prompt message',
						title: 'Prompt',
						placeholder: 'Write some text ...',
						verify: /^\d+$/g,
						verifyMessage: 'Only numbers are allowed',
					}).then((result) => {
						Dialog.alert(result ? `Input: ${result}` : 'Cancelled', 'Prompt');
					});
				}}
			>
				Prompt
			</button>
			<button
				class={knnoButton}
				onClick={function () {
					Progress.show();
					Progress.update(undefined, 'Initializing...');
					setTimeout(() => {
						let v = 0;
						const interval = setInterval(() => {
							Progress.update(v++, 'Progressing...');
							if (v >= 100) {
								clearInterval(interval);
								Progress.close();
							}
						}, 20);
					}, 1000);
				}}
			>
				Progress
			</button>
			<button
				class={knnoButton}
				onClick={() => {
					Dialog.create(<DialogPage />)
						.setAutoClose(true)
						.show();
				}}
			>
				Custom Dialog
			</button>
			<Button
				textContent="Show Toast"
				onClick={() => {
					Toast.show('Hello world!');
				}}
			/>
			<Button
				textContent="Waiting a moment..."
				onClick={() => {
					Waiting.show();
					setTimeout(() => {
						Waiting.close();
					}, 1500);
				}}
			/>
			<ActionPage />
		</div>
	);
}
